/*
 * @Author: 康为 18037890117@163.com
 * @Date: 2023-07-07 17:24:21
 * @LastEditors: 康为 18037890117@163.com
 * @LastEditTime: 2023-07-20 14:11:47
 * @FilePath: /umi-max/src/framework/CardGrid/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as React from 'react';
import { useState } from 'react';
import {
  Layout,
  Responsive,
  ResponsiveProps,
  WidthProvider,
} from 'react-grid-layout';
// import WidthProvider from './WithProvider'
import CardFrame, { CardFrameProps } from '../Card';
import { isEqual } from 'lodash';
import configs from '@/modules/mapping';
import 'react-grid-layout/css/styles.css';
import { withSize } from 'react-sizeme';
import styles from './index.less';

const defaultProps = {
  breakpoints: { lg: 1200 },
  cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
  containerPadding: [10, 10],
  rowHeight: 10,
  isDraggable: true,
  isResizable: true,
  useCSSTransforms: true,
};

interface CardGridProps
  extends Pick<
    ResponsiveProps,
    'layouts' | 'breakpoints' | 'onResizeStop' | 'onDragStop'
  > {
  cards: CardFrameProps[];
}

const ResponsiveGridLayout = WidthProvider(Responsive);

function CardGrid(props: CardGridProps) {
  const { layouts, cards, breakpoints, onResizeStop, onDragStop } = props;
  const [currentLayout, setCurrentLayout] =
    useState<ResponsiveProps['layouts']>(layouts);
  console.log('layouts=', layouts);

  const onLayoutChange = (curLayout: Layout, allLayouts) => {
    console.log(curLayout);

    // setCurrentLayout(curLayout);
  };
  const onResizeStoped = (
    layout,
    oldItem,
    newItem,
    placeholder,
    e,
    element,
  ) => {
    if (typeof onResizeStop === 'function') {
      if (!isEqual(oldItem, newItem)) {
        onResizeStop(layout, oldItem, newItem, placeholder, e, element);
      }
    }
  };

  const onDragStoped = (layout, oldItem, newItem, placeholder, e, element) => {
    if (typeof onDragStop === 'function') {
      if (!isEqual(oldItem, newItem)) {
        onDragStop(layout, oldItem, newItem, placeholder, e, element);
      }
    }
  };

  console.log('layouts=', layouts);

  return (
    <ResponsiveGridLayout
      {...defaultProps}
      className={styles.layout}
      compactType="horizontal"
      layouts={layouts}
      breakpoints={breakpoints}
      containerPadding={[10, 10]}
      onResizeStop={onResizeStoped}
      onDragStop={onDragStoped}
      onLayoutChange={onLayoutChange}
    >
      {currentLayout &&
        currentLayout.lg.map(({ i, w }) => {
          const index = Number(i);
          const card = cards[index];
          console.log(card);

          if (card) {
            const { title, cardType, ...reset } = card;
            return (
              <div key={i} className="cardGridWrapper">
                <CardFrame
                  title={title}
                  cardType={cardType}
                  {...reset}
                  style={{ margin: 0, height: '100%' }}
                />
              </div>
            );
          }
          return <div className="cardGridWrapper" key={i}></div>;
        })}
    </ResponsiveGridLayout>
  );
}

CardGrid.defaultProps = defaultProps;

export default withSize({ refreshMode: 'debounce', refreshRate: 60 })(CardGrid);
